<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔子走迷宫</title>
  <link rel="stylesheet" href="style.css">
  <!-- Optional: Add a cartoonish font from Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
  <!-- Optional: Font Awesome for home icon -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
  <div id="game-container">
    <!-- Top Controls Area -->
    <div id="controls">
      <div class="control-item">
        <label for="level-container">级别:</label>
        <div id="level-container">
          <!-- 级别选择器将由JS动态生成 -->
        </div>
      </div>
      <div class="control-item">
        <button id="reset-button">重新开始</button>
      </div>
      <div class="control-item">
        <span id="timer">时间: 0s</span>
      </div>
      <div class="control-item">
        <button id="sound-toggle" class="icon-button">
          <i class="fas fa-volume-up"></i>
        </button>
      </div>
      <div class="control-item">
        <span id="message"></span> <!-- For win messages etc. -->
      </div>
    </div>

    <!-- Bottom Maze Area -->
    <div id="maze-area">
      <div id="maze-grid-container">
        <div id="maze-grid">
          <!-- Maze will be generated here by JS -->
          <div id="player"></div> <!-- Player (Rabbit) -->
        </div>
      </div>
      <!-- 烟花画布 - 确保有足够的大小和可见度 -->
      <canvas id="fireworks-canvas" width="200" height="300"></canvas>
    </div>
  </div>

  <!-- 音频元素 -->
  <audio id="move-sound" preload="auto">
    <source src="https://assets.codepen.io/21542/pop2.mp3" type="audio/mpeg">
  </audio>
  <audio id="win-sound" preload="auto">
    <source src="https://assets.codepen.io/21542/success-1.mp3" type="audio/mpeg">
  </audio>
  <audio id="reset-sound" preload="auto">
    <source src="https://assets.codepen.io/21542/click.mp3" type="audio/mpeg">
  </audio>
  <audio id="blocked-sound" preload="auto">
    <source src="https://assets.codepen.io/21542/error.mp3" type="audio/mpeg">
  </audio>

  <!-- 先加载fireworks.js，因为maze.js中会引用它的函数 -->
  <script src="fireworks.js"></script>
  <script src="maze.js"></script>
</body>

</html>
